<template>
  <div class="main">
    <div class="aside">
      <el-avatar :src="circleUrl" :size="90" :fit="fits[0]"></el-avatar>
      <span class="name">{{ username }}</span>
      <hr />
      <ul>
        <h4>基本设置</h4>
        <li><router-link to="/center">个人资料</router-link></li>
        <li><router-link to="/updatePassword">修改密码</router-link></li>
        <!-- <h4>我的领养</h4>
        <li><router-link to="/wodelingyang">我的领养</router-link></li>
        <h4>我的帖子</h4>
        <li><router-link to="/wodetiezi">我的帖子</router-link></li> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      username: this.$storage.get("adminName"),
      user: {},
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {
    init() {
      this.$http({
        url: `${this.$storage.get("sessionTable")}/session`,
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.user = data.data;
          console.log(this.user);
          if (this.user.touxiang) {
            this.circleUrl = this.user.touxiang;
          }
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.main {
  display: block;
  position: absolute;
}
.info {
  position: absolute;
  width: 600px;
  top: 50px;
  left: 300px;
}
.aside {
  display: block;
  float: left;
  margin-left: 50px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 0 20px;
  background: #48a0f9;
  width: 240px;
  height: 550px;
  overflow-y: auto;
}
.el-avatar {
  display: block;
  margin: 20px auto 0;
}
.name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 900;
  display: block;
  margin: 15px 0;
  text-align: center;
}
.aside h4 {
  margin: 25px 0;
  font-size: 20px;
  text-align: center;
  color: #111;
}
.aside ul {
  padding: 0;
  margin: 0;
  text-align: center;
}
li {
  margin: 18px 0;
  list-style-type: none;
  font-weight: 700;
  color: #222;
}
li a {
  margin: 18px 0;
  list-style-type: none;
  font-weight: 600;
  color: #eee;
}
li a:link {
  list-style-type: none;
  text-decoration: none;
}
li a:visited {
  list-style-type: none;
  text-decoration: none;
}
li a:hover {
  list-style-type: none;
  text-decoration: none;
}
li a:active {
  list-style-type: none;
  text-decoration: none;
}
</style>